<template>
  <div>


      <div>
          名称:<input type="text" v-model="name"><br>
          头图:<input type="file" ref="pic"><br>
          简介:<input type="text" v-model="desc"><br>
          价格:<input type="text" v-model="price"><br>
          库存:<input type="text" v-model="store"><br>
          分类1:
          <select v-model="cate1">
              <option v-for="item1 in cate1_list" :key="item1.id" :value="item1.id">{{item1.name}}</option>
          </select>
          分类2:
          <select v-model="cate2">
              <option v-for="item2 in cate2_list" :key="item2.id" :value="item2.id">{{item2.name}}</option>
          </select>
         分类3:
          <select v-model="cate3">
              <option v-for="item3 in cate3_list" :key="item3.id" :value="item3.id">{{item3.name}}</option>
          </select><br>
          详情:
          <textarea v-model="info"></textarea><br>
          <p>规格:</p>
          颜色:<input type="text" v-model="color"><br>
          屏幕尺寸:<input type="text" v-model="size"><br>
          版本:<input type="text" v-model="banben"><br>
        <input type="button" value="添加" @click="add">
      </div>


  </div>
</template>


<script>
export default {
    data(){
        return {
            name:"华为手机P40",
            desc:"华为手机P40就是牛逼",
            price:"9980",
            store:"200000",
            cate1:"1",
            cate2:"1",
            cate3:"1",
            info:"华为手机P40，是我的最爱",
            cate1_list:[],
            cate2_list:[],
            cate3_list:[],
            color:"土豪金",
            size:"8寸屏幕",
            banben:"12G/628G",
        }
    },
    created(){
        this.axios.get("/gapp/cate1").then(resp=>{
            console.log(resp.data)
            this.cate1_list=resp.data
        })
    },
    watch:{
        cate1(val1,val2){
            // 根据一级分类ID去获取二级分类
            this.axios.get("cate1?pid="+val1,).then(resp=>{
                console.log(resp.data)
                this.cate2_list=resp.data
            })
        },
        cate2(val1,val2){
            // 根据二级分类ID去获取三级分类
            this.axios.get("cate1?pid="+val1,).then(resp=>{
                console.log(resp.data)
                this.cate3_list=resp.data
            })
        }
    },
    methods:{
        add(){


            //把规格 拼接成JSON，然后传递Django
            let params={
                "color":this.color,
                "size":this.size,
                "banben":this.banben
            }


            //把JSON对象 转成JSON字符串
            params=JSON.stringify(params)


            let fdata=new FormData()
            fdata.append("name",this.name)
            fdata.append("desc",this.desc)
            fdata.append("price",this.price)
            fdata.append("store",this.store)
            fdata.append("cate1",this.cate1)
            fdata.append("cate2",this.cate2)
            fdata.append("cate3",this.cate3)
            fdata.append("info",this.info)
            fdata.append("pic",this.$refs.pic.files[0])
            fdata.append("params",params)
            
            this.axios.post("good",fdata).then(resp=>{
                console.log(resp.data)
            }).catch(error=>{
                console.log(error)
            })
        }
    }
}
</script>


<style>


</style>